<template>
    <div class="page">
        <div class="login-panel">
            <img src="../assets/logo.png" class="logo" />
            <h2>小卷尺管理后台</h2>
            <div class="form-panel">
                <Form ref="formInline" :model="formInline" :rules="ruleInline">
                    <FormItem prop="user">
                        <Input type="text" v-model="formInline.user" placeholder="账号">
                        <Icon type="ios-person-outline" slot="prepend"></Icon>
                        </Input>
                    </FormItem>
                    <FormItem prop="password">
                        <Input type="password" v-model="formInline.password" placeholder="密码">
                        <Icon type="ios-locked-outline" slot="prepend"></Icon>
                        </Input>
                    </FormItem>
                    <FormItem>
                        <Button :loading="$store.state.loading" long type="primary" @click="handleSubmit('formInline')">登录</Button>
                    </FormItem>
                </Form>
            </div>
            <div class="copyright">
                <p>技术支持 夼旗科技</p>
            </div>
        </div>
    </div>
</template>
<script>
import { api } from '../config'
import request from '../utils/api'
export default {
    name: 'login',
    data() {
        return {
            formInline: {
                user: '',
                password: ''
            },
            ruleInline: {
                user: [
                    { required: true, message: '请填写用户名', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请填写密码', trigger: 'blur' },
                    { type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.loginAction()
                } else {
                    this.$Message.error('表单验证失败!');
                }
            })
        },
        loginAction() {
            this.$store.dispatch('login',{email:this.formInline.user,password:this.formInline.password});
        }
    }
}
</script>
<style lang="less" scoped>
.page {
    background: url("../assets/login_bg.jpg");
    background-size: cover, 100% auto;
    height: 100%;
    position: relative;

    .login-panel {
        width: 360px;
        box-sizing: border-box;
        background: #fff;
        height: 100%;
        display: flex;
        flex-direction: column;
        position: absolute;
        right: 0;
        top: 0;
        align-items: center;
        justify-content: center;
        box-shadow: #e0e0e0 2px 2px 2px;
        h2 {
            font-size: 18px;
            font-weight: normal;
            margin-bottom: 24px;
        }
        .logo {
            display: block;
            width: 100px;
            margin-bottom: 12px;
        }
        .form-panel {
            width: 280px;
        }
        .copyright {
            font-size: 14px;
        }
    }
}
</style>